<template>
    <div class="savebar" :class="{ rightSave: right, openedSavebar : opened }">
        <div v-if="!slot"  class="btn-box box-width">
            <slot></slot>
            <el-button @click="save" class="savebar-btn" type="primary" size="large">保存</el-button>
        </div>
        <slot name="btn"></slot>
    </div>
</template>

<script  setup lang="ts">
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const opened = computed(() => {
    return appStore.sidebarOpen
})
defineProps({
    right: {
        type: Boolean,
        default: false
    },
    slot: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['save'])
const save = ()=> {
    emit('save')
}
</script>

<style lang="scss" scoped>
.openedSavebar{
    left: 210px !important;
}
.box-width{
    width: 59%;
    min-width: 500px;
    max-width: 800px;
}
.savebar{
    position: fixed;
    bottom: 0px;
    background: #fff;
    padding: 10px 40px;
    border-top: 1px solid #eee;
    z-index: 8;
    box-shadow: 0 -1px 11px 0 rgb(10 10 10 / 9%);
    padding-left: 20px;
    right: 0px;
    left: 54px;
    .btn-box{
        text-align: right;
    }
}

.rightSave{
    left: 0px;
    .box-width{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        .savebar-btn{
            margin-right: 70px;
        }
    }
}
.el-button + .el-button{
    margin-left: 20px;
}
</style>